<template>
  <el-container style="width: 100%">
    <div class="editor-container">
      <markdown-editor ref="markdownEditor" v-model="content" :language="language" height="500px" />
    </div>
  </el-container>
</template>

<script>
  import MarkdownEditor from '@/components/MarkdownEditor/index'
  export default {
    name: 'MarkdownView',
    components:{
      MarkdownEditor
    },
    data: function() {
      return {
        reader: null,
        content: null,
        languageTypeList: {
          'en': 'en_US',
          'zh': 'zh_CN',
          'es': 'es_ES'
        },

      }
    },
    props: {
      // id: String,
      id: String,
      version: Number,
      applyId: String,
    },
    computed: {
      language() {
        return this.languageTypeList['zh']
      }
    },
    created() {
      this.getMarkdownContent(this.id, this.version, this.applyId);
    },
    methods: {
      getMarkdownContent(id, version, applyId) {
        this.$api.getFilePlainText(id, version, applyId).then(res => {
          this.content = res.data + "";
          console.log(this.content)
        })
      }
    }
  }
</script>

<style scoped>
.editor-container {
  padding-left: 20px;
  padding-right: 20px;
  width:100%;
}
</style>
